<template>
  <div class="view-fill">
    <div class="app-container-flex">
      <full-screen
        v-model="showDialog"
        :title="title"
        :btn-list="fullInfo.btnList"
        @returnBack="$emit('returnModify')"
      >
        <div class="model-panel">
          <div class="model-panel-title">
            <p>{{ $t("basic_information") }}</p>
          </div>
          <div class="model-panel-body">
            <page-form
              class="paddingBox order-model-formBox flex_wrap_start_start"
              v-model:ref-obj="formInfo.ref"
              :data="formInfo.data"
              :field-list="formInfo.fieldList"
              :label-width="formInfo.labelWidth"
              :rules="formInfo.rules"
              @handleEvent="handleEvent"
            >
              <template v-slot:form-execInterval>
                <select-model
                  v-model="formInfo.data.execIntervalType"
                  type-code="exec_interval_type"
                  :check-default="false"
                  :clearable="false"
                  @change="execIntervalTypChange"
                />
              </template>

              <template v-slot:form-execMoment>
                <el-select
                  v-model="formInfo.data.execMoment"
                  clearable
                  placeholder="请选择时间"
                >
                  <el-option
                    v-for="item in formInfo.execMomentOptions"
                    :key="item"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </template>
              <template v-slot:form-weekDays>
                <el-checkbox-group
                  key="weekDays"
                  v-model="formInfo.data.weekDays"
                >
                  <el-checkbox-button
                    v-for="(item, index) in formInfo.weekDayOptions"
                    :key="index"
                    class="patrolPlan-checkbox"
                    :label="item.value"
                    >{{ item.label }}</el-checkbox-button
                  >
                </el-checkbox-group>
              </template>
              <template v-slot:form-mouthDays>
                <el-checkbox-group
                  key="mouthDays"
                  v-model="formInfo.data.mouthDays"
                  style="width: 375px"
                >
                  <el-checkbox-button
                    v-for="(item, index) in formInfo.mountDayOptions"
                    :key="index"
                    class="patrolPlan-checkbox"
                    :label="item"
                    >{{ item }}</el-checkbox-button
                  >
                </el-checkbox-group>
              </template>
            </page-form>
          </div>
        </div>
      </full-screen>
    </div>
  </div>
</template>

<script setup name="BrandModify">
import commonJson from "@/common/js/commonJson.js";
import { createComparisonInfoSetting } from "@/api/tripartite";

const { proxy } = getCurrentInstance();
const emit = defineEmits();

const props = defineProps(["visible", "orderId", "title"]);

const formInfo = ref({
  ref: null,
  data: {
    tsSystemCode: "",
    comparisonRule: "1",
    isAutoComparison: "0",
  },
  fieldList: [
    {
      label: "对照系统",
      value: "tsSystemCode",
      type: "select-model",
      code: "client_id",
      show: true,
    },
    {
      label: "对照信息",
      value: "comparisonInfo",
      type: "select-model",
      code: "comparison_info",
      show: true,
    },
    {
      label: "是否自动对照",
      value: "isAutoComparison",
      type: "select-model",
      code: "yes_or_no",
      event: "isAutoComparison",
      disabled: true,
      show: true,
    },
    {
      label: "对照规则",
      value: "comparisonRule",
      type: "select-model",
      disabled: true,
      code: "comparison_rule",
      show: true,
    },
    {
      label: "自动同步与对照日期",
      value: "execInterval",
      type: "slot",
      show: false,
    },
    {
      label: "每周的",
      value: "weekDays",
      type: "slot",
      show: false,
      className: "not-br",
    },
    {
      label: "每月的",
      value: "mouthDays",
      type: "slot",
      show: false,
      className: "not-br",
    },
    {
      label: "时间为",
      value: "execMoment",
      type: "slot",
      show: false,
    },
  ],
  rules: {
    tsSystemCode: [
      { required: true, message: "请选择对照系统", trigger: "change" },
    ],
    comparisonInfo: [
      { required: true, message: "请选择对照信息", trigger: "change" },
    ],
    isAutoComparison: [
      { required: true, message: "请选择是否自动对照", trigger: "change" },
    ],
    comparisonRule: [
      { required: true, message: "请选择对照规则", trigger: "change" },
    ],
  },
  execMomentOptions: commonJson.execMomentOptions,
  mountDayOptions: commonJson.mountDayOptions,
  weekDayOptions: commonJson.weekDayOptions,
  labelWidth: "120px",
});
const fullInfo = ref({
  btnList: [{ label: "保存", event: save, show: true }],
});

const showDialog = computed({
  get() {
    return props.visible;
  },
  set(newValue) {
    emit("update:visible", newValue); // 更新父组件visible
  },
});

function handleEvent(str, val) {
  if (str === "isAutoComparison") {
    let fieldListItem = formInfo.value.fieldList.find(
      (item) => item.value === "comparisonRule"
    );
    if (val == "0") {
      showFieldListItem(false, "execInterval");
      showFieldListItem(false, "execMoment");
      fieldListItem.disabled = true;
    } else if (val == "1") {
      showFieldListItem(true, "execInterval");
      showFieldListItem(true, "execMoment");
      fieldListItem.disabled = false;
    }
  }
}
function execIntervalTypChange(val) {
  //间隔时间天周月切换
  formInfo.value.data.execInterval = undefined;
  if (val === "1") {
    showFieldListItem(false, "weekDays");
    showFieldListItem(false, "mouthDays");
    formInfo.value.data.weekDays = [];
    formInfo.value.data.mouthDays = [];
  } else if (val === "2") {
    showFieldListItem(true, "weekDays");
    showFieldListItem(false, "mouthDays");
    formInfo.value.data.mouthDays = [];
    proxy.$nextTick(() => {
      formInfo.value.ref.clearValidate("weekDays");
    });
  } else if (val === "3") {
    showFieldListItem(false, "weekDays");
    showFieldListItem(true, "mouthDays");
    formInfo.value.data.weekDays = [];
    proxy.$nextTick(() => {
      formInfo.value.ref.clearValidate("mouthDays");
    });
  }
}
function showFieldListItem(show, nameValue) {
  let fieldList = formInfo.value.fieldList;
  fieldList.map((item) => {
    if (item.value === nameValue) {
      item.show = show;
    }
  });
}
function save() {
  formInfo.value.ref.validate((valid) => {
    if (valid) {
      createComparisonInfoSetting(formInfo.value.data).then((res) => {
        if (res && res.success) {
          showDialog.value = false;
          emit("returnModify", false);
        }
      });
    }
  });
}
</script>

<style scoped lang="scss"></style>
